<template>
  <div class="seek">
    <!-- {{data}} -->
    <navigator
      :url="`/pages/search/particulars/index?id=${data.id}`"
      open-type="navigate"
      hover-class="navigator-hover"
    >
      <view class="card">
        <view class="image-section">
          <image
            class="profile-img"
            :src="data.avatar"
          ></image>
          <!-- :src="data.avatar" -->
          <view class="verified-badge">实名认证</view>
          <view class="name-overlay">
            <text>{{ data.nickname }}</text>
          </view>
        </view>
        <view class="details-section">
          <text class="info">{{ data.age }}岁 · {{ data.height }}cm · {{ data.education }}</text>
          <view class="location-section">
            <view class="location">
              <image src="../../../static/images/address.png" class="location-icon" />
              <text class="location">{{ data.household_region }}</text>
            </view>
            <text class="job">{{ data.occupation }}</text>
          </view>
        </view>
      </view>
    </navigator>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})
</script>

<style lang="scss" scoped>
.card {
  width: 310rpx;
  margin: 20rpx;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.image-section {
  position: relative;
  height: 380rpx;
}

.profile-img {
  object-fit: cover;
}

.verified-badge {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background-color: red;
  color: white;
  padding: 4rpx 10rpx;
  font-size: 24rpx;
  border-radius: 3px;
  z-index: 1;
}

.name-overlay {
  position: absolute;
  bottom: 8rpx;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 32rpx;
  padding: 10rpx 0;
}

.details-section {
  padding: 34rpx;
  text-align: center;
}

.info {
  font-size: 14px;
  margin-top: 8px;
  color: #666;
}

.location-section {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  .location {
    background-color: #e5f6f8;
    color: #00aabf;
  }
  .location-icon {
    width: 18px;
    height: 18px;
    margin-right: 8rpx;
    margin-bottom: 4rpx;
  }
}

.job {
  background-color: #e5f6f8;
  margin-left: 10rpx;
  font-size: 14px;
  color: #00aabf;
}
</style>
